// src/screens/MatchProfileScreen.js
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, Alert } from 'react-native';
import api from '../services/api';

const MatchProfileScreen = ({ route, navigation }) => {
  const { userId, userName, user } = route.params || {};
  const [userData, setUserData] = useState(user || null);
  const [loading, setLoading] = useState(!user); // 如果已经有user数据，则不需要加载

  useEffect(() => {
    if ((userId || user?.id) && !user) {
      fetchUserProfile();
    }
  }, [userId, user]);

  const fetchUserProfile = async () => {
    try {
      setLoading(true);
      // 调用获取用户资料的API
      const id = userId || user?.id;
      const response = await api.getUserProfile(id); // 假设这个API存在
      if (response.success) {
        setUserData(response.data);
      }
    } catch (error) {
      console.error('获取用户资料失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const startChat = () => {
    if (userData) {
      // 导航到聊天界面
      navigation.navigate('Main', { 
        screen: 'Chat',
        params: { matchId: userData.id, matchName: userData.name }
      });
    }
  };

  if (loading) {
    return (
      <View style={styles.container}>
        <Text>加载中...</Text>
      </View>
    );
  }

  if (!userData) {
    return (
      <View style={styles.container}>
        <Text>无法加载用户资料</Text>
      </View>
    );
  }

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>{userName || userData.name} 的资料</Text>
      </View>

      <View style={styles.profileContainer}>
        {userData.avatar ? (
          <Image source={{ uri: userData.avatar }} style={styles.avatar} />
        ) : (
          <View style={styles.placeholderAvatar}>
            <Text style={styles.avatarText}>{userData.name?.charAt(0) || 'U'}</Text>
          </View>
        )}

        <Text style={styles.userName}>{userData.name}</Text>

        <View style={styles.infoSection}>
          <Text style={styles.infoLabel}>手机号:</Text>
          <Text style={styles.infoValue}>{userData.phone || '未提供'}</Text>
        </View>

        {/* 添加更多用户信息字段 */}
        <View style={styles.infoSection}>
          <Text style={styles.infoLabel}>年龄:</Text>
          <Text style={styles.infoValue}>{userData.age || '未提供'}</Text>
        </View>

        <View style={styles.infoSection}>
          <Text style={styles.infoLabel}>性别:</Text>
          <Text style={styles.infoValue}>{userData.gender || '未提供'}</Text>
        </View>

        <View style={styles.infoSection}>
          <Text style={styles.infoLabel}>兴趣爱好:</Text>
          <Text style={styles.infoValue}>
            {userData.interests ? userData.interests.join(', ') : '未提供'}
          </Text>
        </View>

        <View style={styles.infoSection}>
          <Text style={styles.infoLabel}>个人简介:</Text>
          <Text style={styles.infoValue}>{userData.bio || '未提供'}</Text>
        </View>
      </View>

      <TouchableOpacity style={styles.chatButton} onPress={startChat}>
        <Text style={styles.chatButtonText}>开始聊天</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5'
  },
  header: {
    backgroundColor: '#2196F3',
    padding: 15,
    alignItems: 'center'
  },
  headerTitle: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold'
  },
  profileContainer: {
    backgroundColor: 'white',
    margin: 15,
    padding: 20,
    borderRadius: 10,
    alignItems: 'center'
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 15
  },
  placeholderAvatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: '#ddd',
    marginBottom: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarText: {
    fontSize: 40,
    fontWeight: 'bold',
    color: '#888'
  },
  userName: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  infoSection: {
    alignSelf: 'stretch',
    marginBottom: 15
  },
  infoLabel: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5
  },
  infoValue: {
    fontSize: 16,
    color: '#666'
  },
  chatButton: {
    backgroundColor: '#2196F3',
    padding: 15,
    margin: 15,
    borderRadius: 30,
    alignItems: 'center'
  },
  chatButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

export default MatchProfileScreen;